<template>
	<view>
		<tree-com :show-btn="true" @click-edit-name="clickEditName"></tree-com>
		<template v-if="visible">
			<uni-fab :pattern="pattern" horizontal="right" vertical="bottom" :popMenu="false" @fabClick="add"></uni-fab>
		</template>
		<!-- 修改名称 -->
		<u-modal v-model="show" :title="title" :showCancelButton="true" @confirm="modalConfirm">
			<view class="slot-content" style="padding:0 10px;">
				<u-form :model="model" ref="uForm" style="width: 100%;">
					<u-form-item label-width="130" label="新名称:">
						<u-input v-model="model.name" type="text" />
					</u-form-item>
				</u-form>
			</view>
		</u-modal>
		<!-- 新增 -->
		<u-modal v-model="show1" :title="title1" :showCancelButton="true" @confirm="modalConfirm">
			<view class="slot-content" style="padding:0 10px;">
				<u-form :model="model" ref="uForm" style="width: 100%;">
					<u-form-item label-width="130" label="组类型:">
						<u-radio-group v-model="radiovalue1" placement="column" @change="groupChange">
							<u-radio :customStyle="{marginBottom: '8px'}" label="代理商" name="代理商">代理商</u-radio>
							<u-radio :customStyle="{marginBottom: '8px'}" label="所属单位" name="所属单位">所属单位</u-radio>
						</u-radio-group>
					</u-form-item>
					<u-form-item label-width="120" label="代理商:" v-if="radiovalue1 == '所属单位'">
						<u-select v-model="equipShow" :list="equipList" value-name="code" label-name="name" @confirm="confirm"></u-select>
						<u-tag :text="getTyp(model.equipId)" @click="equipShow = true" />
					</u-form-item>
					<u-form-item label-width="130" label="名称:">
						<u-input v-model="model.name" type="text" />
					</u-form-item>
				</u-form>
			</view>
		</u-modal>
	</view>
</template>

<script>
	import treeCom from '../../com/tree/index'
	export default {
		components: {
			treeCom
		},
		data() {
			return {
				// 按钮显示
				visible: true,
				// 加号样式
				pattern: {
					buttonColor: '#409EFF'
				},
				show: false,
				show1: false,
				title: '修改名称',
				title1: '添加组',
				model: {
					name: ''
				},
				radiovalue1: '代理商',
				equipShow: false,
				equipList: [],
				type: [],
			}
		},
		onLoad(option) {
			this.request({
				url: 'BaseEquipment/pages',
				data: {
					limit: 0
				},
				success: res => {
					this.type = res.data;
					this.equipList = res.data;
				}
			});
		},
		onShow() {
			this.init();
		},
		methods: {
			init() {
				console.log('==', this.detailData)
				uni.setNavigationBarTitle({
					title: '设备组管理'
				});
			},
			add() {
				this.show1 = true
			},
			clickEditName(obj) {
				console.log('clickEditName==1111', obj)
				this.show = true
				this.model.name = obj.label
			},
			modalConfirm() {
				console.log(this.model)
			},
			groupChange(n) {
				console.log('groupChange', n);
			},
			getTyp(id) {
				let typ = this.type.find(m => m.code == id);
				if (typ != undefined) {
					return typ.name;
				} else {
					return '请选择设备';
				}
			},
			confirm(e) {
				if (e.length > 0) {
					this.model.equipId = e[0].value;
				}
			},
		}
	}
</script>

<style>

</style>
